<template>
  <div class="box">
    <Loading v-if="loading" />
    <link
      rel="stylesheet"
      v-for="(item, index) in detailObj.css"
      :key="index"
      :href="item"
    />
    <div class="content-box" ref="scrollTopEle" @scroll="setscrollTopNum">
      <div class="new-img-box">
        <img class="news-img" :src="detailObj.image" alt="" />
        <p class="new-title">{{ detailObj.title }}</p>
      </div>
      <div class="detail-html" v-html="detailObj.body"></div>
    </div>
    <div class="detail-footer">
      <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
      <router-link :to="{ name: 'Comment', query: { id: $route.query.id } }">
        <i class="iconfont icon-duanxin">
          <b>{{ additional.comments }}</b>
        </i>
      </router-link>
      <i class="iconfont icon-zanpress">
        <b>{{ additional.popularity }}</b>
      </i>
      <i class="iconfont icon-unstarred"></i>
      <i class="iconfont icon-daochu"></i>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onActivated, nextTick, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { getDetailContent, getAdditional } from "@/views/Detail/detail";
import Loading from "@/components/Loading/index.vue";
import { detailStateType } from "@/views/Detail/interface";
export default defineComponent({
  name: "Detail",
  setup() {
    const state = reactive<detailStateType>({
      loading: false,
      additional: {},
      scrollTopNum: 0,
      scrollTopEle: null,
      routeFrom: {},
      detailObj: {},
    });
    const route = useRoute();
    const init = async () => {
      state.loading = true;
      state.detailObj = await getDetailContent(route.query.id as string);
      state.additional = await getAdditional(route.query.id as string);
      state.loading = false;
    };
    onActivated(() => {
      nextTick(() => {
        if ((state.routeFrom as any).name == "Home") {
          init();
        } else {
          (state.scrollTopEle as HTMLFormElement).scrollTop =
            state.scrollTopNum;
        }
      });
    });
    const setscrollTopNum = () => {
      state.scrollTopNum = (state.scrollTopEle as HTMLFormElement).scrollTop;
    };
    // keep-alive只会执行一次init函数
    init();
    return {
      setscrollTopNum,
      ...toRefs(state),
    };
  },
  components: {
    Loading,
  },
  beforeRouteEnter(to, from, next) {
    next((ctx: any) => {
      ctx.routeFrom = from;
    });
  },
});
</script>

<style scoped lang='scss'>
.new-img-box {
  position: relative;
  .new-title {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.2rem 0.1rem;
    font-size: 0.2rem;
    color: #fff;
    margin: 0 !important;
  }
  .news-img {
    width: 100%;
  }
}
.detail-html {
  padding-bottom: 0.5rem;
}
.detail-footer {
  height: 0.5rem;
  // position: fixed;
  // left: 0;
  // right: 0;
  // bottom: 0;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.2rem 0 0.1rem;
  i {
    font-size: 0.25rem;
    position: relative;
    b {
      font-size: 0.12rem;
      position: absolute;
    }
  }
}
.box {
  height: 100%;
  // overflow: auto;
  display: flex;
  flex-direction: column;
  .content-box {
    flex: 1;
    overflow: auto;
  }
}
</style>